<!DOCTYPE html>
<html lang="en">
<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <meta charset="utf-8">
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <title>工程建筑ERP登录</title>
    <link rel="stylesheet" href="./resources/layui/css/layui.css">
    <script src="./resources/js/jquery.min.js"></script>
    <script>
        $(function () {
            yanzhen();
        })
    </script>
    <style>
        html,body{padding: 0;margin: 0;width: 100%;height: 100%; background-image: url("./resources/images/denglu.jpg");background-repeat: no-repeat;background-position: 100%,100%;}
        html{font-size: 100px;}
        ul,li{list-style: none;}
        a{text-decoration: none;}
        body{position: relative;}
        .main{width: 10rem; height: 5rem; position: fixed;left: 0;right: 0;top: 0;bottom: 0;margin: auto;}
        .mainL,.mainR{float: left;height: 100%;}
        .mainL{width: 60%;background-image: url("./resources/images/bg.jpg");background-size: 100%;}
        .mainR{width: 40%;background-color: #FFF;}
        .mainRon{margin: .38rem .52rem .2rem .6rem;}
        .gongnames{height: 70px;width: 100%;background-image: url("./resources/images/dengluNAMES_03.jpg");background-size:100%;background-repeat: no-repeat;}
        .dengluOn{padding-top: .4rem;}
        .dengluONs{height: .55rem;line-height: .55rem;margin-bottom: .1rem;}
        .dengluONs span{ color:#666;font-size: .2rem;width: 0.8rem;display: inline-block; text-align: right;
            padding-right:
                0.2rem;}
        .layui-input{width: 3.2rem;display: inline-block;border: 0; background-color: #f5f5f5}
        .layui-input:focus{ background-color: #f5f5f5;}
        .yanzheng{width: 1.6rem;}
        .mainRB{width: 100%;text-align: center;}
        .dengluONs{position: relative;}
        .dengluONs a{width: .5rem; display: inline-block;line-height: .15rem;position: absolute;top: .15rem; right:
                .5rem;}
        .mainRB button{color: #FFF!important;}
        @media screen and (max-width: 1200px) {
            html{font-size: 86px;}

        }
        @media screen and (max-width: 750px) {
            html{font-size: 66px;}
            .mainL {
                display: none;
            }
            .dengluONs a{width: 100%; text-align: right;position:static; }
            .dengluONs:nth-child(3){margin-bottom: .6rem;}
            .gongnames{background-size: 100%;}
        }

        *.yanzhengs {
            -moz-user-select: -moz-none;
            -khtml-user-select: none;
            -webkit-user-select: none;

            /*
              Introduced in IE 10.
              See http://ie.microsoft.com/testdrive/HTML5/msUserSelect/
            */
            -ms-user-select: none;
            user-select: none;
        }
        span.yanzhengs{display: inline-block; width: 80px; height:36px;
            border: 1px solid #EEE; position: absolute;margin-left: 10px;
            margin-top: 10px; padding-right:0;line-height: 36px; text-align: center;font-size: 20px;}
        .zhuce{  text-align:center;border-left:1px solid #e3e3e3;font-size: 16px; height: 4rem; margin: 0.5rem
        auto;}
        .zhuce img{width:140px; height: 140px;}
        .zhuce dt{ color: #999; line-height: 30px; padding-top: 60px;}
        .zhuce dt a{ color: #029686;}
        .zhuce dd{  line-height: 40px; }
        input:-webkit-autofill {
            -webkit-box-shadow: 0 0 0px 1000px #f5f5f5 inset !important;
        }
    </style>

</head>
<body>
<div class="main">
    <div class="mainL" style="background: #fff;">
        <form class="layui-form" action="">
            <div class="mainRon">
                <div class="gongnames"></div>
                <div class="dengluOn">
                    <div class="dengluONs">
                        <span class="names">用户名</span>
                        <input type="text" name="uname" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input names">
                    </div>
                    <div class="dengluONs">
                        <span class="mima">密码</span>
                        <input type="password" name="upwd" lay-verify="required" placeholder="请输入密码" autocomplete="off" class="layui-input mimas">
                    </div>
                    <div class="dengluONs">
                        <span class="mima">验证码</span>
                        <input type="text" name="vcode" lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input yanzheng">
                        <span class="yanzhengs"  onclick="yanzhen()">

                        </span>
                        <a href="###" onclick="yanzhen()">看不清换一张</a>
                    </div>
                </div>

            </div>

            <div class="mainRB">
                <button class="layui-btn layui-btn-primary layui-btn-lg tijiao" type="button" lay-submit lay-filter="_subm" style="background-color: #029686;border-color:#029686;">登录</button>
                <button class="layui-btn layui-btn-primary layui-btn-lg" type="reset" style="color: #555!important;">重置</button>
            </div>

        </form>

    </div>
    <div class="mainR">
        <dl class="zhuce">
           <dt> 您还没有账户?<a href="./zhuce.html" class="zhuces">立即注册</a></dt>

            <dd style="overflow: hidden;">
                <div class="layui-col-sm6 layui-col-md6 layui-col-lg6">
                    <p>Android版扫码下载</p>
                    <img src="./resources/images/Androidxiazai.png" alt="Android版二维码" title="扫码下载" class="">
                </div>
                <div class="layui-col-sm6 layui-col-md6 layui-col-lg6">
                    <p>关注微信号</p>
                    <img src="./resources/images/WXEWM.jpg" alt="Android版二维码" title="扫码关注" >
                </div>


            </dd>
            <dd style="margin-top: 20px;">
                <span style="width: 100px;display: inline-block;text-align: justify;">公司联系电话</span>：0371-86088106<br>
                <span style="width: 100px;display: inline-block;text-align: justify;">微信公众号</span> ：hntxrj2014
            </dd>
        </dl>

    </div>

</div>



<script src="./resources/layui/layui.js"></script>
<script src="./resources/js/api.js"></script>
<script>

    var arrs='';                        //记录并放入验证码
    function yanzhen() {                //验证码验证
        $('.yanzhengs').html('');       //清空页面显示
        arrs='';                        //清空验证码
        for(var i=0;i<4;i++){           //循环四次生成四次取整的0-10的随机数（不包含10）
            var yanZheng=parseInt(10*Math.random());
            arrs+=yanZheng;
        }
        $('.yanzhengs').html(arrs);     //放入页面
    };
    layui.use(['form', 'layedit'], function() {     //声明引入layui的js
        var form = layui.form
            , layer = layui.layer
            , layedit = layui.layedit;

        //自定义验证规则
        form.verify({
            title: function(value){
                if(value.length < 5){
                    return '标题至少得5个字符啊';
                }
            }
            ,mima: [/(.+){6,12}$/, '密码必须6到12位']

            ,pass: [/(.+){4,4}$/, '请输入正确的验证码']
            ,content: function(value){
                layedit.sync(editIndex);
            }
        });


        var arrs=new Array();
        var arrtow=new Array();
        //提交监听
        form.on('submit(_subm)',function (data) {     //提交监听，基本上页面上所有涉及页面前后端交互的数据都是以此方式提交
            var yanZ=$('.yanzhengs').text();          //获取页面验证码
            if(yanZ!=$('[name="vcode"]').val()){      //判断如果页面上的验证码和输入框的验证码不相同，弹出提示，清空验证码输入框并且刷新页面验证码
                layer.msg('验证码错误,请重新输入');
                $('[name="vcode"]').val('');
                yanzhen();              //刷新页面验证码
                Btnoff('.tijiao');
                return;
            }
            var index = layer.load(5); //换了种风格      点击登录后的加载动画
            var _Width=$(window).width();                //获取页面宽度
            var _List=_Width*.5;
            $('.layui-layer-loading').css('left',_List); //点击登录出现的加载动画的位置；
            //console.log(data.field)
            Btnon('.tijiao');                           //提交按钮禁用
            localStorage.ZQXdata='';                    //清空 localStorage.ZQXdata

            $.ajax({
                type:'post',
                url:urls+'/api/user/login.do',
                data:data.field,
                success:function (res) {
                    console.log(res)
                    layer.close(index);                         //删除载入时的动画
                    layer.msg(res.msg);
                    if(res.code==0){
                        setCookie('yanzheng',res.data);         //写入cookie
                        setInterval(function () {
                            var datas=res.fullDown;                 //获取权限信息
                            $.each(datas,function (k,v) {           //循环获取的权限相关数据
                                $.each(v,function (k1,v1) {         //循环获取的数据，区分左侧主导航栏与页面内部权限；
                                    arrs.push(v1.url);              //左侧权限统一放入数组arrs内
                                    arrtow.push(v1.api);            //页面权限统一放入数组arrtow内
                                });
                            });
                            arrs=arrs.join(',');                    //数组元素转字符串。
                            localStorage.ZQXdata=arrs;              //数据存储至长期缓存中，供跳转页面后使用
                            localStorage.jiekou=arrtow;
//                        //console.log(sessionStorage.ZQXdata)
                       location.href='index_home.html';

                        },1000);

                    }else if(res.code==1){
                        yanzhen();
                        Btnoff('.tijiao');      //开放 按钮点击
                    }else{
                        yanzhen();
                        Btnoff('.tijiao');       //开放 按钮点击
                    }
                },
                error:function (data) {
                    layer.close(index);
                    layer.msg('系统错误');
                    yanzhen();
                    Btnoff('.tijiao');      //开放 按钮点击
                }
            });
            return false;
        });


    });

</script>

</body>
</html>